<!DOCTYPE html>
<html>
<head>
<title>Round Fan</title>
<script src="../lib/zeu.js"></script>
<script src="examples.js"></script>
<link rel="stylesheet" href="example.css">
</head>
<body>
  <div class="container">
    <h3>Default Size</h3>
    <pre><code>
width: 200px;
height: 200px;
    </code></pre>

    <h3>Default</h3>
    <div id="round-fan-1" style="width: 200px; height: 200px;"></div>

    <h3>Options</h3>
    <pre><code>
var roundFan2 = new zeu.RoundFan(
  document.getElementById('round-fan-2'), {
    fanColor: 'blue',
    centerColor: 'blue',
    speed: 1
  });
roundFan2.speed = 5;
roundFan2.fanColor = 'red';
roundFan2.centerColor = 'green';
    </code></pre>
    <div id="round-fan-2" style="width: 200px; height: 200px;"></div>

    <h3>Size X 2</h3>
    <div id="round-fan-3" style="width: 200px; height: 200px;"></div>
  </div>
</div>

<script type="text/javascript">

  var roundFan1 = new zeu.RoundFan(document.getElementById('round-fan-1'));

  var roundFan2 = new zeu.RoundFan(
    document.getElementById('round-fan-2'), {
      fanColor: 'blue',
      centerColor: 'blue',
      speed: 1
    });
  roundFan2.speed = 5;
  roundFan2.fanColor = 'red';
  roundFan2.centerColor = 'green';

  setInterval(function() {
    roundFan2.speed = getRandomInt(1, 5);
    roundFan2.fanColor = getRandomColor();
    roundFan2.centerColor = getRandomColor();
  }, 2000);

  var roundFan3 = new zeu.RoundFan(document.getElementById('round-fan-3'));

</script>
</body>
</html>
